<template>
    <div class="view-chart-map" ref="xwin"></div>
</template>

<script>
import henanJson from '@/assets/echarts-map-json/province/henan.json'; //湖南
import hunanJson from '@/assets/echarts-map-json/province/hunan.json'; //河南
import anhuiJson from '@/assets/echarts-map-json/province/anhui.json'; //安徽
import aomenJson from '@/assets/echarts-map-json/province/aomen.json'; //澳门
import beijingJson from '@/assets/echarts-map-json/province/beijing.json'; //北京
import chongqingJson from '@/assets/echarts-map-json/province/chongqing.json'; //重庆
import fujianJson from '@/assets/echarts-map-json/province/fujian.json'; //福建
import gansuJson from '@/assets/echarts-map-json/province/gansu.json'; //甘肃
import guangdongJson from '@/assets/echarts-map-json/province/guangdong.json'; //广州
import guangxiJson from '@/assets/echarts-map-json/province/guangxi.json'; //广西
import guizhouJson from '@/assets/echarts-map-json/province/guizhou.json'; //贵州
import hainanJson from '@/assets/echarts-map-json/province/hainan.json'; //海南
import hebeiJson from '@/assets/echarts-map-json/province/hebei.json'; //河北
import heilongjiangJson from '@/assets/echarts-map-json/province/heilongjiang.json'; //黑龙江
import hubeiJson from '@/assets/echarts-map-json/province/hubei.json'; //湖北

import jiangsuJson from '@/assets/echarts-map-json/province/jiangsu.json'; //江苏
import jiangxiJson from '@/assets/echarts-map-json/province/jiangxi.json'; //江西
import jilinJson from '@/assets/echarts-map-json/province/jilin.json'; //吉林
import liaoningJson from '@/assets/echarts-map-json/province/liaoning.json'; //辽宁
import neimengguJson from '@/assets/echarts-map-json/province/neimenggu.json'; //内蒙古

import ningxiaJson from '@/assets/echarts-map-json/province/ningxia.json'; //宁夏
import qinghaiJson from '@/assets/echarts-map-json/province/qinghai.json'; //青海
import shandongJson from '@/assets/echarts-map-json/province/shandong.json'; //山东
import shanghaiJson from '@/assets/echarts-map-json/province/shanghai.json'; //上海
import shanxiJson from '@/assets/echarts-map-json/province/shanxi1.json'; //山西
import sichuanJson from '@/assets/echarts-map-json/province/sichuan.json'; //四川
import taiwanJson from '@/assets/echarts-map-json/province/taiwan.json'; //台湾
import tianjinJson from '@/assets/echarts-map-json/province/tianjin.json'; //天津
import xianggangJson from '@/assets/echarts-map-json/province/xianggang.json'; //香港
import xinjiangJson from '@/assets/echarts-map-json/province/xinjiang.json'; //新疆
import xizangJson from '@/assets/echarts-map-json/province/xizang.json'; //西藏
import yunnanJson from '@/assets/echarts-map-json/province/yunnan.json'; //云南
import zhejiangJson from '@/assets/echarts-map-json/province/zhejiang.json'; //浙江
import chartOption from '@/assets/topo-data/chart-option.js';

import BaseView from '../View.vue';
import { getSecond } from '@/utils/topo/index';

export default {
    name: 'ChartMapView',
    extends: BaseView,
    data() {
        return {
            echart: null,
            mapJsons: {},
            timer: null,
        };
    },
    computed: {
        echartRun() {
            const { echartOption, echartRun, mapAddress, mapUrl } = this.detail.dataBind;
            this.$nextTick(function () {
                if (echartOption && echartRun > new Date().getTime() - 10000) {
                    try {
                        let flag = false;
                        if (mapAddress == this.$t('topo.components.chart.073848-8')) {
                            flag = this.getMapJson(mapUrl);
                        } else {
                            flag = this.initEcharts();
                        }
                        flag && this.$message({ message: this.$t('topo.components.chart.073848-9'), type: 'success' });
                    } catch (error) {
                        this.$message({
                            message: this.$t('topo.components.chart.073848-10'),
                            type: 'warning',
                        });
                    }
                }
            });
            return echartOption + echartRun;
        },
        mapChange() {
            this.$nextTick(function () {
                try {
                    if (this.detail.dataBind.mapAddress == this.$t('topo.components.chart.073848-8') && this.detail.dataBind.mapUrl) {
                        this.getMapJson(this.detail.dataBind.mapUrl);
                    } else {
                        this.initEcharts();
                    }
                } catch (error) {
                    console.log(error);
                    this.$message({
                        message: this.$t('topo.components.chart.073848-10'),
                        type: 'warning',
                    });
                }
            });
            return this.detail.dataBind.mapAddress;
        },
    },
    watch: {
        echartRun(newColor, oldColor) {
            // console.log('',newColor);
        },
        mapChange() {},
    },
    mounted() {
        const { httpSetting, mapAddress, mapUrl } = this.detail.dataBind;
        const { url, time, unit } = httpSetting || {};
        if (this.editMode && url) {
            let second = 60 * 1000;
            if (!time) {
                second = getSecond(time, unit);
            }
            this.getEchartData();
            this.timer = setInterval(() => {
                this.getEchartData();
            }, second);
        } else {
            if (mapAddress == this.$t('topo.components.chart.073848-8')) {
                this.getMapJson(mapUrl);
            } else {
                this.initEcharts();
            }
        }
    },
    methods: {
        loadData(option, mapJson) {
            if (this.echart) {
                this.echart.dispose();
            }
            switch (this.detail.dataBind.mapAddress) {
                case '安徽':
                    mapJson = anhuiJson;
                    break;
                case '澳门':
                    mapJson = aomenJson;
                    break;
                case '北京':
                    mapJson = beijingJson;
                    break;
                case '重庆':
                    mapJson = chongqingJson;
                    break;
                case '福建':
                    mapJson = fujianJson;
                    break;
                case '甘肃':
                    mapJson = gansuJson;
                    break;
                case '广东':
                    mapJson = guangdongJson;
                    break;
                case '广西':
                    mapJson = guangxiJson;
                    break;
                case '贵州':
                    mapJson = guizhouJson;
                    break;
                case '海南':
                    mapJson = hainanJson;
                    break;
                case '河北':
                    mapJson = hebeiJson;
                    break;
                case '黑龙江':
                    mapJson = heilongjiangJson;
                    break;
                case '河南':
                    mapJson = henanJson;
                    break;
                case '湖北':
                    mapJson = hubeiJson;
                    break;
                case '湖南':
                    mapJson = hunanJson;
                    break;
                case '江苏':
                    mapJson = jiangsuJson;
                    break;
                case '江西':
                    mapJson = jiangxiJson;
                    break;
                case '吉林':
                    mapJson = jilinJson;
                    break;
                case '辽宁':
                    mapJson = liaoningJson;
                    break;
                case '内蒙古':
                    mapJson = neimengguJson;
                    break;
                case '宁夏':
                    mapJson = ningxiaJson;
                    break;
                case '青海':
                    mapJson = qinghaiJson;
                    break;
                case '山东':
                    mapJson = shandongJson;
                    break;
                case '上海':
                    mapJson = shanghaiJson;
                    break;
                case '山西':
                    mapJson = shanxiJson;
                    break;
                case '四川':
                    mapJson = sichuanJson;
                    break;
                case '台湾':
                    mapJson = taiwanJson;
                    break;
                case '天津':
                    mapJson = tianjinJson;
                    break;
                case '香港':
                    mapJson = xianggangJson;
                    break;
                case '新疆':
                    mapJson = xinjiangJson;
                    break;
                case '西藏':
                    mapJson = xizangJson;
                    break;
                case '云南':
                    mapJson = yunnanJson;
                    break;
                case '浙江':
                    mapJson = zhejiangJson;
                    break;
                case '自定义':
                    mapJson = this.mapJsons;
                    break;
                default:
                    mapJson = henanJson;
                    break;
            }
            this.$echarts.registerMap('mapJson', mapJson);
            let view = this.$refs.xwin;
            this.echart = this.$echarts.init(view);
            this.echart.setOption(option);
        },
        onResize() {
            if (this.echart) {
                this.echart.resize();
            }
        },
        // https://www.isqqw.com/asset/get/areas_v3/country/china.json
        getMapJson(mapUrl) {
            this.$request
                .get(mapUrl)
                .then((res) => {
                    this.mapJsons = res.data;
                    return this.initEcharts();
                })
                .catch((err) => {
                    this.$message({
                        message: this.$t('topo.components.chart.073848-13'),
                        type: 'warning',
                    });
                });
        },
        initEcharts() {
            let { echartOption } = this.detail.dataBind;
            if (!echartOption) {
                this.detail.dataBind.echartOption = chartOption.getOptionMap();
            }
            this.setEchartOption();
            return true;
        },
        getEchartData() {
            const { httpSetting } = this.detail.dataBind;
            const { url, type, headers, params, body } = httpSetting;
            this.$request({
                url: url,
                method: type,
                headers: headers,
                params: params,
                data: body,
            }).then((res) => {
                this.detail.dataBind.echartData = JSON.stringify(res.data);
                if (this.detail.dataBind.mapAddress == this.$t('topo.components.chart.073848-8')) {
                    this.getMapJson(this.detail.dataBind.mapUrl);
                } else {
                    this.initEcharts();
                }
            });
        },
        // 设置 option
        setEchartOption() {
            let { echartOption, echartData, filterRule } = this.detail.dataBind;
            let funStr = chartOption.getFun(echartOption);
            let fun = eval('(' + funStr + ')');
            let opData = {};
            if (echartData) {
                opData = JSON.parse(echartData);
                if (filterRule) {
                    const filtFunStr = 'function () {\n' + 'const data = opData;' + '\n' + filterRule + '\n' + '}';
                    let filtFun = eval('(' + filtFunStr + ')');
                    opData = filtFun();
                }
            }
            let option = fun(this.$echarts, opData);
            this.loadData(option);
            this.onResize();
        },
    },
    beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
    },
};
</script>

<style lang="scss">
.view-chart-map {
    height: 100%;
    width: 100%;
    padding: 10px;
}
</style>
